import React, {memo, useState} from 'react';
import {useSelector} from "react-redux";
import {renderRoutes} from "react-router-config";
import {Redirect} from "react-router-dom";
import {Modal} from "antd";

import "./index.css";
import Navigation from "../../components/navigation/Navigation";
import {navLists_setting, navLists_setting_cn} from "../../common/navLists";


export default memo(function Setting(props) {
  const [isShowAlert, setIsShowAlert] = useState(false);
  const [isGo, setIsGo] = useState(false);
  const {isUser, isCN} = useSelector(state => ({
    isUser: state.loginReducer.isUser,
    isCN: state.languageReducer.isCN
  }));

  //  取消弹窗
  function isNo() {
    setIsShowAlert(false);
  }

  //  返回首页
  function isOk() {
    sessionStorage.setItem("sessionNavIndex", "0");
    setIsGo(true);
  }

  return isUser ? (
    <div style={{overflow: "hidden"}}>
      <Navigation isShow={setIsShowAlert} go={isGo} navItem={isCN ? navLists_setting_cn : navLists_setting} subTitle={isCN ? "设 置" : "Setting"} iconStyle="iconStyle"/>
      <section className="mainContent">
        {renderRoutes(props.route.routes)}
      </section>
      {
        isShowAlert
          ? <Modal
            title=""
            visible={true}
            onOk={isOk}
            onCancel={isNo}
            okText={isCN ? "确定" : "YES"}
            cancelText={isCN ? "取消" : "NO"}
          >
            <p style={{fontSize: "18px"}}>{isCN ? "你确定要离开此界面吗?" : "Are you sure to leave?"}</p>
          </Modal>
          : null
      }
    </div>
  ) : (<Redirect to="/"/>);
});